.x-bg-c{
	background-color: #180153
}
#container {
    width:100%;
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;
}
.x-menu-grid1{ margin:1.7% 0 0 1.7%;}
.x-menu-grid1 .cell{ float:left; margin:0 1.4% 1.4% 0;}
.x-menu-grid1 .cell .card{ display:block; color:#fff;}
.x-menu-grid1 .cell img{ width:22.3%; vertical-align:middle;}
.x-menu-grid1 .cell span{ display:inline-block; width:100%; height:1.38em; font-weight:bold; overflow:hidden;}
.x-menu-grid1 .cell:nth-child(1){ width:48.3%; background-color:#058ba1; text-align:center;}
.x-menu-grid1 .cell:nth-child(1) div{ height:11.4em;}
.x-menu-grid1 .cell:nth-child(1) img{ margin:26% 0 15.5%;}
.x-menu-grid1 .cell:nth-child(2){ width:48.9%; background-color:#2978ee;}
.x-menu-grid1 .cell:nth-child(2) div{ height:5.5em;}
.x-menu-grid1 .cell:nth-child(2) img{ float:left; margin:12% 5% 0 18.6%;}
.x-menu-grid1 .cell:nth-child(2) span{ float:left; width:auto; margin-top:15.3%;}
.x-menu-grid1 .cell:nth-child(3){ width:48.9%; background-color:#a503ad;}
.x-menu-grid1 .cell:nth-child(3) div{ height:5.5em;}
.x-menu-grid1 .cell:nth-child(3) img{ float:left; margin:12% 5% 0 18.6%;}
.x-menu-grid1 .cell:nth-child(3) span{ float:left; width:auto; margin-top:15.3%;}
.x-menu-grid2{ margin:0 0 0 1.7%;}
.x-menu-grid2 .cell{ float:left; margin:0 1.4% 1.4% 0; text-align:center;}
.x-menu-grid2 .cell .card{ display:block; height:8em; color:#fff;}
.x-menu-grid2 .cell img{ vertical-align:middle;}
.x-menu-grid2 .cell span{ display:inline-block; width:100%; height:1.38em; font-weight:bold; overflow:hidden;}
.x-menu-grid2 .cell:nth-child(1){ width:98.5%;}
.x-menu-grid2 .cell:nth-child(1) img{ width:100%; height:100%;}
.x-menu-grid2 .cell:nth-child(2){ width:31.7%; background-color:#1e64c6;}
.x-menu-grid2 .cell:nth-child(2) img{ width:100%; height:100%;}
.x-menu-grid3{ margin:0 0 0 1.7%;}
.x-menu-grid3 .cell{ float:left; margin:0 1.4% 1.4% 0; text-align:center;}
.x-menu-grid3 .cell .card{ display:block; height:8em; color:#fff;}
.x-menu-grid3 .cell img{ vertical-align:middle;}
.x-menu-grid3 .cell span{ display:inline-block; width:100%; height:1.38em; font-weight:bold; overflow:hidden;}
.x-menu-grid3 .cell:nth-child(1){ width:31.8%; background-color:#b01cb5;}
.x-menu-grid3 .cell:nth-child(1) img{ width:29.5%; margin:28.5% 0 11.5%;}
.x-menu-grid3 .cell:nth-child(2){ width:31.8%; background-color:#1e64c6;}
.x-menu-grid3 .cell:nth-child(2) img{ width:29.5%; margin:28.5% 0 11.5%;}

.x-menu-grid3 .cell:nth-child(3){ width:31.8%; background-color:#09a80a;}
.x-menu-grid3 .cell:nth-child(3) img{ width:29.5%; margin:28.5% 0 11.5%;}
.x-menu-grid4{ margin:0 0 0 1.7%;}
.x-menu-grid4 .cell{ float:left; margin:0 1.4% 1.4% 0; text-align:center;}
.x-menu-grid4 .cell .card{ display:block; height:8em; color:#fff;}
.x-menu-grid4 .cell img{ width:27%; margin:22.5% 0 12.5%; vertical-align:middle;}
.x-menu-grid4 .cell span{ display:inline-block; width:100%; height:1.38em; font-weight:bold; overflow:hidden;}
.x-menu-grid4 .cell:nth-child(1){ width:31.8%; background-color:#dd5930;}
.x-menu-grid4 .cell:nth-child(2){ width:65.4%; background-color:#b31b44;}
.x-menu-grid4 .cell:nth-child(2) img{ width:13.5%; margin:11% 0 6.1%;}
@media screen and (min-width:480px){
    #container{ font-size:18px;}
}
@media screen and (min-width:640px){
    #container{ font-size:22px;}
}